<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
                <el-breadcrumb-item>基础表格</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <!-- <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button> -->
          <!-- <router-link :to="'/' + this.list + '/add'" v-if="plus_add">
            <el-button type="primary" icon="plus">
              添加
            </el-button>
          </router-link> -->
          <!-- 这里号码牌 -->
          <el-select v-if="plus_search && this.list == 'num'" v-model="num_status" placeholder="筛选号码牌" class="handle-select mr10">
              <el-option key="0" label="关闭" value="0"></el-option>
              <el-option key="1" label="开启" value="1"></el-option>
          </el-select>
          <el-input v-model="select_school_word" v-if="plus_search && this.list != 'fans'" placeholder="筛选学校关键词" class="handle-input"></el-input>
          <el-input v-model="select_school_word" v-if="this.list == 'fans'" placeholder="筛选用户关键词" class="handle-input"></el-input>
          <el-input v-model="select_student_word" v-if="this.list == 'student' || this.list == 'refund'" placeholder="筛选学生关键词" class="handle-input"></el-input>
          <el-select v-if="this.list == 'student'" v-model="deposit" placeholder="筛选押金" class="handle-select mr10">
              <el-option key="-1" label="退押金" value="-1"></el-option>
              <el-option key="0" label="未交押金" value="0"></el-option>
              <el-option key="1" label="已交押金" value="1"></el-option>
          </el-select>
          <el-select v-if="this.list == 'student'" v-model="service" placeholder="筛选购买" class="handle-select mr10">
              <el-option key="0" label="全部学生" value="0"></el-option>
              <el-option key="1" label="购买学生" value="1"></el-option>
          </el-select>
          <el-button type="primary" v-if="plus_search" icon="search" @click="search">搜索</el-button>
          <el-button type="primary" icon="upload" v-if="plus_export" @click="exportData">导出</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%">
          <!-- <el-table-column type="selection" width="55"></el-table-column>  @selection-change="handleSelectionChange" 在100%后 暂时没有批量这项功能，所以删除 -->
          <el-table-column prop="id" label="ID" sortable width="80">
          </el-table-column>
          <el-table-column :prop="item.prop" :label="item.label" :sortable="item.sort" :width="item.width" :key="index" v-for="(item, index) in show_list">
          </el-table-column>
          <el-table-column label="操作" :width="list== 'redeemRecord'? '300':'200'" v-if="handle_show">
            <template slot-scope="scope">
              <router-link :to="'/' + list + '/edit/' + scope.row.id" v-if="edit_show">
              <!-- 这里 -->
                <el-button size="small" :disabled="list == 'num' && scope.row.status == 1">编辑</el-button>
              <!-- 这里 -->
              </router-link>
              <router-link :to="'/' + list + '/detail/' + scope.row.id"  v-if="list == 'school'">
                <el-button size="small">详情</el-button>
              </router-link>
              <el-button size="small" type="danger" v-if="del_show"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              <el-button size="small" v-if="switch_show && scope.row.status != 1"
                @click="handleSwitchOpen(scope.$index, scope.row)">开启</el-button>
              <el-button size="small" type="danger" v-if="switch_show && scope.row.status != 0"
                @click="handleSwitchClose(scope.$index, scope.row)">关闭</el-button>
              <el-button size="small" v-if="consent_show && (scope.row.status == 0 || scope.row.status == 1)"
                :disabled="scope.row.status == 1"
                @click="handleConsent(scope.$index, scope.row)">同意</el-button>
              <el-button size="small" type="danger" v-if="consent_show && (scope.row.status == 0 || scope.row.status == 2)"
                :disabled="scope.row.status == 2"                  
                @click="handleUnconsent(scope.$index, scope.row)">不同意</el-button>
              <router-link :to="'/redeemCode/'+scope.row.id">
                <el-button size="small" v-if="list == 'redeemRecord'">查看</el-button>
              </router-link>
              
              <el-button size="small" v-if="list == 'redeemRecord'" @click="redeemExport(scope.row.id)">导出</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    :page-size="15"
                    :current-page="cur_page"
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
// js 内容单独导入一个js文件，页面加载减少引入js
export default {
  props: ['list'],
  data() {
    return {
      tableData: [],
      school_id: undefined,
      num_status: undefined,
      select_school_word: undefined,
      select_student_word: undefined,
      deposit: undefined,
      service: undefined,
      plus_add: true,
      plus_search: false,
      plus_export: false,
      handle: ['fans', 'order', 'student'],
      handle_show: true,
      // 编辑
      edit_list: [
        'banner',
        'dynamic',
        'help',
        'service',
        'coupon',
        'config',
        'permission',
        'role',
        'user',
        'key',
        'num'
      ],
      edit_show: false,
      // 删除
      del_list: [
        'banner',
        'dynamic',
        'help',
        'service',
        'coupon',
        'school',
        'moment',
        'permission',
        'role',
        'user',
        'key',
        'redeemRecord'
      ],
      del_show: false,
      // 开启与关闭
      switch_list: ['num'],
      switch_show: false,
      // 同意与不同意
      consent_list: ['refund'],
      consent_show: false,
      // 学校列表 查看该校学生
      cur_page: 1,
      total: 1,
      // multipleSelection: [],
      select_cate: '',
      select_word: '',
      is_search: false,
      show_list: null,
      banner_list: [
        { prop: 'create_time', label: '创建时间', width: '140', sort: true },
        { prop: 'banner_name', label: '轮播图名称', width: '200' },
        { prop: 'banner_path', label: '轮播图地址', width: '380' },
        { prop: 'banner_url', label: '轮播图外链接', width: '' },
        { prop: 'sort', label: '排序', width: '100' }
      ],
      dynamic_list: [
        { prop: 'create_at', label: '创建时间', width: '140', sort: true },
        { prop: 'author', label: '作者', width: '' },
        { prop: 'title', label: '标题', width: '600' },
        { prop: 'status', label: '状态', width: '140' }
      ],
      help_list: [
        { prop: 'title', label: '标题', width: '' },
        { prop: 'sort', label: '排序', width: '200' },
        { prop: 'status', label: '状态', width: '200' }
      ],
      service_list: [
        { prop: 'service_name', label: '服务标题', width: '' },
        { prop: 'province', label: '省', width: '80' },
        { prop: 'city', label: '市', width: '80' },
        { prop: 'area', label: '县/区', width: '100' },
        { prop: 'start_time', label: '服务开始时间', width: '120' },
        { prop: 'end_time', label: '服务结束时间', width: '120' },
        { prop: 'sales_price', label: '现价', width: '100' },
        { prop: 'origin_price', label: '原价', width: '100' },
        { prop: 'special', label: '特价', width: '80' },
        { prop: 'recommend', label: '推荐', width: '80' },
        { prop: 'status', label: '状态', width: '80' },
        { prop: 'type', label: '类型', width: '80' },
        { prop: 'scope', label: '范围', width: '80' }
      ],
      coupon_list: [
        { prop: 'name', label: '优惠券名称', width: '' },
        { prop: 'start_time', label: '优惠开始时间', width: '160', sort: true },
        { prop: 'end_time', label: '优惠结束时间', width: '160' },
        { prop: 'pay', label: '优惠金额', width: '100' },
        { prop: 'service.service_name', label: '对应服务套餐', width: '200' }
      ],
      redeemCode_list: [
        { prop: 'code', label: '兑换码', width: '' },
        { prop: 'start_time', label: '开始时间', width: '180' },
        { prop: 'end_time', label: '结束时间', width: '180' },
        { prop: 'status', label: '状态', width: '180' }
      ],
      redeemRecord_list: [
        { prop: 'title', label: '标题', width: '' },
        { prop: 'created_at', label: '领取时间', width: '180' },
        { prop: 'status', label: '状态', width: '150' }
      ],
      school_list: [
        { prop: 'create_time', label: '创建时间', width: '150', sort: true },
        { prop: 'school_name', label: '学校名称', width: '200' },
        { prop: 'school_address', label: '学校地址', width: '' },
        { prop: 'num', label: '洗衣机数量', width: '150' },
        { prop: 'max_num', label: '最大号码牌', width: '150' },
        { prop: 'sort', label: '排序', width: '150' }
      ],
      student_list: [
        { prop: 'name', label: '名字', width: '100' },
        { prop: 'phone', label: '手机号码', width: '180' },
        { prop: 'deposit', label: '押金状态', width: '100' },
        { prop: 'num', label: '号码牌', width: '100' },
        { prop: 'end_time', label: '服务结束时间', width: '150' },
        { prop: 'school_name', label: '学校名称', width: '200' },
        { prop: 'grade', label: '年级', width: '150' },
        { prop: 'class', label: '班级', width: '150' },
        { prop: 'area', label: '地区', width: '' }
      ],
      num_list: [
        { prop: 'created_at', label: '日期', width: '', sort: true },
        { prop: 'student.name', label: '姓名', width: '180' },
        { prop: 'student.school_name', label: '学校名称', width: '180' },
        { prop: 'num', label: '号码牌', width: '180' }
      ],
      fans_list: [
        { prop: 'created_at', label: '创建时间', width: '150', sort: true },
        { prop: 'name', label: '用户名称', width: '200' },
        { prop: 'phone', label: '手机号码', width: '140' },
        { prop: 'address', label: '具体地址', width: '' }
      ],
      config_list: [
        { prop: 'created_at', label: '创建时间', width: '140', sort: true },
        { prop: 'name', label: '名称', width: '200' },
        { prop: 'value', label: '值', width: '' },
        { prop: 'type', label: '类型', width: '200' }
      ],
      order_list: [
        { prop: 'created_at', label: '创建时间', width: '180', sort: true },
        { prop: 'order_type', label: '订单类型', width: '' },
        { prop: 'student.name', label: '学生姓名', width: '100' },
        { prop: 'student.phone', label: '手机号码', width: '140' },
        { prop: 'student.school_name', label: '学校名称', width: '200' },
        { prop: 'student.grade', label: '年级', width: '100' },
        { prop: 'student.class', label: '班级', width: '100' },
        { prop: 'student.num', label: '号码牌', width: '100' },
        { prop: 'order_name', label: '套餐名称', width: '180' },
        { prop: 'total_money', label: '支付金额', width: '100' }
      ],
      refund_list: [
        { prop: 'created_at', label: '申请时间', width: '115', sort: true },
        { prop: 'updated_at', label: '审批时间', width: '115' },
        { prop: 'student_name', label: '学生姓名', width: '100' },
        { prop: 'out_trade_no', label: '商户订单号', width: '' },
        { prop: 'pay_money', label: '订单金额', width: '100' },
        { prop: 'order_type', label: '订单类型', width: '100' }
      ],
      permission_list: [
        { prop: 'updated_at', label: '更新日期', width: '180', sort: true },
        { prop: 'display_name', label: '姓名', width: '180' },
        { prop: 'description', label: '介绍', width: '' }
      ],
      role_list: [
        { prop: 'updated_at', label: '更新日期', width: '180', sort: true },
        { prop: 'display_name', label: '姓名', width: '180' },
        { prop: 'description', label: '介绍', width: '' }
      ],
      user_list: [
        { prop: 'updated_at', label: '更新日期', width: '180', sort: true },
        { prop: 'name', label: '姓名', width: '180' },
        { prop: 'email', label: 'Email', width: '' }
      ],
      key_list: [
        { prop: 'title', label: '名称', width: '' },
        { prop: 'type', label: '类型', width: '' },
        { prop: 'keys', label: '关键字', width: '' },
        { prop: 'content', label: '文字内容', width: '' },
        { prop: 'image_url', label: '图片链接', width: '' },
      ]
      // { prop: '', label: '', width: '' },
    }
  },
  created() {
    // 获取数据
    this.getData()
    // 判断操作内部显示
    this.switchShow()
  },
  methods: {
    handleCurrentChange(val) {
      this.cur_page = val
      if (this.list == 'num' || this.list == 'student' || this.list == 'fans' || this.list == 'order' || this.list == 'refund') {
        this.search(val, true)
      } else {
        this.getData()
      }
    },
    getData(val) {
      let list_name = this.list + '_list'
      this.show_list = this[list_name]
      if (this.list == 'redeemCode' && this.$route.params.id) {
        APP.ajax(this.list + '/list?record_id=' + this.$route.params.id, {}, res => {
          this.tableData = res.data.data.data
          this.total = res.data.data.total
          this.filterData()
        })
      } else {
        APP.ajax(this.list + '/list?page=' + this.cur_page, {}, res => {
          this.tableData = res.data.data.data
          this.total = res.data.data.total
          this.filterData()
        })
      }
    },
    search(page, IsTrue) {
      // 两个参数，1为点击跳转的页数，2为是否进行学校搜索来获取学校ID
      // 如果page不为数字，即没有传参，自动为1
      if (!Number(page)) {
        page = 1
      }
      // 如果当前页面为用户页面，则做以下处理
      if (this.list == 'fans') {
        APP.ajax('fans/list?page=' + page, { name: this.select_school_word }, res => {
          this.tableData = res.data.data.data
          this.total = res.data.data.total
        })
      } else {
        // 学校搜索数据
        let params = {
          province: '',
          city: '',
          area: '',
          school_name: this.select_school_word
        }
        // 如果没有搜索学校名称
        // 如果传递参数，则不需要进行学校搜索，直接进行数据获取；否则，获取学校ID，然后获取数据
        if (IsTrue || params.school_name == undefined) {
          this.getSearchData(page)
        } else {
          // 默认为第一个学校ID
          APP.ajax('post@school/search', params, res => {
            this.cur_page = 1;
            this.school_id = res.data.data.data[0].id;
            this.getSearchData(page);
          })
        }
      }
    },
    getSearchData(page) {
      // 进行页面判断用以发送不同的请求 分别为 号码牌、学生、订单
      if (this.list == 'num') {
        APP.ajax(this.list + '/list?page=' + page, { school_id: this.school_id, status: this.num_status }, res => {
          this.tableData = res.data.data.data
          this.total = res.data.data.total
          this.filterData()
        })
      } else if (this.list == 'student') {
        let params = {
          name: this.select_student_word,
          deposit: this.deposit,
          service: this.service,
          school_id: this.school_id
        }
        if (params.name == undefined) {
          params.name = '';
        }
        APP.ajax('post@student/search?page=' + page, params, res => {
          this.tableData = res.data.data.data
          this.total = res.data.data.total
          this.filterData()
        })
      } else if (this.list == 'order'){
        APP.ajax('order/list?page=' + page + '&school_id=' + this.school_id, {}, res => {
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
          this.filterData();
        })
      } else if (this.list == 'refund') {
        let url;
        if (this.school_id == undefined) {
          url = 'refund/list?page=' + page + '&student_name=' + this.select_student_word;
        } else if (this.select_student_word == undefined) {
          url = 'refund/list?page=' + page + '&school_id=' + this.school_id;
        } else {
          url = 'refund/list?page=' + page + 
        '&school_id=' + this.school_id + 
        '&student_name=' + this.select_student_word;
        }
        APP.ajax(url, {}, res => {
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
          this.filterData();
        })
      }
    },
    exportData() {
      if (this.list == 'num') {
        window.open('http://m.lexikj.com/num/export?status=' + this.num_status + '&school_id=' + this.school_id)
      } else if (this.list == 'student') {
        let serviceUrl = 'service=' + this.service,
          schoolIdUrl = 'school_id=' + this.school_id,
          depositUrl = 'deposit=' + this.deposit;
        let url = serviceUrl + '&' + schoolIdUrl + '&' + depositUrl
        if (this.service === undefined) {
          url = schoolIdUrl + '&' + depositUrl
        }
        if (this.deposit === undefined) {
          url = serviceUrl + '&' + schoolIdUrl
        }
        if (this.school_id === undefined) {
          url = serviceUrl + '&' + depositUrl
        }
        if (this.service === undefined && this.deposit === undefined) {
          url = schoolIdUrl
        }
        if (this.service === undefined && this.school_id === undefined) {
          url = depositUrl
        }
        if (this.deposit === undefined && this.school_id === undefined) {
          url = serviceUrl
        }
        if (this.service === undefined && this.deposit === undefined && this.school_id === undefined) {
          url = ''
        }
        window.open('http://m.lexikj.com/student/export?' + url)
      } else {
        let url = undefined;
        if (this.school_id != undefined) {
          url = 'school_id=' + this.school_id
        }
        window.open('http://m.lexikj.com/order/export?' + url)
      }
    },
    // 兑换码导出
    redeemExport(id){
      window.open('http://m.lexikj.com/redeemCode/export?record_id=' + id);
    },
    filterData(){
      if(this.list != 'num' && this.list != 'refund'){
        this.tableData.forEach(el => {
          if(el.status === 2) {
            el.status = '已使用'
          } else {
            el.status = el.status === 0 ? '关闭' : '开启'
          }
        })
      }
      if (this.list === 'service') {
        this.tableData.forEach(el => {
          el.scope = el.scope === 0 ? '全国' : el.scope
          el.scope = el.scope === 1 ? '省' : el.scope
          el.scope = el.scope === 2 ? '市' : el.scope
          el.scope = el.scope === 3 ? '县/区' : el.scope
          el.scope = el.scope === 4 ? '学校' : el.scope
          el.type = el.type === 0 ? '普通服务' : '押金'
          el.recommend = el.recommend === 0 ? '关闭' : '开启'
          el.special = el.special === 0 ? '关闭' : '开启'
        });
      }
      if (this.list === 'coupon' || this.list === 'redeemCode') {
        this.tableData.forEach(el => {
          el.start_time = this.filterTime(el.start_time)
          el.end_time = this.filterTime(el.end_time)
        })
      }
      if (this.list === 'student') {
        this.tableData.forEach(el => {
          el.end_time = this.filterTime(el.end_time)
        })
      }
      if (this.list === 'refund' || this.list === 'order') {
        this.tableData.forEach(el => {
          el.order_type = el.order_type === 0 ? '普通服务':'押金';
        })
      }
    },
    // start_time 和 end_time 是时间戳
    filterTime(val){
      let time = new Date(val * 1000)
      let year = time.getFullYear()
      let month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1
      let date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
      return year + '-' + month + '-' + date
    },
    // formatter(row, column) {
    //   return row.address
    // },
    // filterTag(value, row) {
    //   return row.tag === value
    // },
    // 点击删除按钮
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          APP.ajax('post@' + this.list + '/del', { id: row.id }, res => {
            if (res.data.status == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              // 删除成功，数组中除去
              this.tableData.splice(index, 1)
            }
          })
        })
        .catch(() => {
          // 删除不成功
          this.$message({
            type: 'info',
            message: '删除不成功，请再试一次'
          })
        })
    },
    // 点击开启按钮
    handleSwitchOpen(index, row) {
      // 服务 putShelves 号码牌 open
      let request = undefined
      if (this.list == 'service') {
        request = '/putShelves'
      } else {
        request = '/open'
      }
      APP.ajax('post@' + this.list + request, { id: row.id }, res => {
        if (res.data.status === 200) {
          this.tableData[index].status = 1
        }
      })
    },
    // 点击关闭按钮
    handleSwitchClose(index, row) {
      // 服务 del 号码牌 close
      let request = undefined
      if (this.list == 'service') {
        request = '/del'
      } else {
        request = '/close'
      }
      APP.ajax('post@' + this.list + request, { id: row.id }, res => {
        if (res.data.status === 200) {
          this.tableData[index].status = 0
        }
      })
    },
    // 点击同意按钮
    handleConsent(index, row) {
      let params = {
        id: row.id,
        student_id: row.student_id,
        order_type: row.order_type,
        out_trade_no: row.out_trade_no,
        pay_money: row.pay_money,
        status: 1
      }
      APP.ajax('post@refund/operation', params, res => {
        if (res.data.status === 200) {
          this.tableData[index].status = 1
        }
      })
    },
    // 点击不同意按钮
    handleUnconsent(index, row) {
      let params = {
        id: row.id,
        student_id: row.student_id,
        order_type: row.order_type,
        out_trade_no: row.out_trade_no,
        pay_money: row.pay_money,
        status: 2
      }
      APP.ajax('post@refund/operation', params, res => {
        if (res.data.status === 200) {
          this.tableData[index].status = 2
        }
      })
    },
    // delAll() {
    //   const self = this,
    //     length = self.multipleSelection.length
    //   let str = ''
    //   self.del_list = self.del_list.concat(self.multipleSelection)
    //   for (let i = 0; i < length; i++) {
    //     str += self.multipleSelection[i].name + ' '
    //   }
    //   self.$message.error('删除了' + str)
    //   self.multipleSelection = []
    // },
    // handleSelectionChange(val) {
    //   this.multipleSelection = val
    // },
    // 这里用于判断按钮的展示
    switchShow() {
      // 用户、订单、退款列表没有添加按钮
      if (this.list == 'fans' || this.list == 'order' || this.list == 'refund') {
        this.plus_add = false;
      }
      if (this.list == 'num' || this.list == 'student' || this.list == 'fans' || this.list == 'order' || this.list == 'refund') {
        this.plus_search = true
      }
      if (this.list == 'num' || this.list == 'student' || this.list == 'order') {
        this.plus_export = true
      }
      this.handle.forEach(element => {
        if (this.list == element) {
          this.handle_show = false
        }
      })
      this.edit_list.forEach(element => {
        if (this.list == element) {
          this.edit_show = true
        }
      })
      this.del_list.forEach(element => {
        if (this.list == element) {
          this.del_show = true
        }
      })
      this.switch_list.forEach(element => {
        if (this.list == element) {
          this.switch_show = true
        }
      })
      this.consent_list.forEach(element => {
        if (this.list == element) {
          this.consent_show = true
        }
      })
    }
  }
}
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 200px;
  display: inline-block;
}

</style>